<template>
       <div>

     <el-table :data="tableData" style="width: 100%" height="30rem" cell-class-name="cell-row" header-cell-class-name="header-row">
    <el-table-column prop="name" label="产品名称"  />
    <el-table-column prop="tagQuantity" label="产品编码" />
    <el-table-column prop="numberOfCoveredTags" label="产品规格 " />
        <el-table-column prop="numberOfCoveredTags" label="销售数量 " />
            <el-table-column prop="numberOfCoveredTags" label="销售金额 " />
            <template #append>
             <div class="table-append">
                 <!-- <el-button size="small"  v-if="pagetotalbtn>pageNum && logding &&tableData.length>0" type="primary" :loading="true">正在加载</el-button> -->
                 <el-button size="small" v-if="datano && tableData.length>0" @click="getData"  :loading="logding" type="primary">点击加载更多</el-button>
                 <span v-if="!datano">暂无更多数据</span>
            </div>
            </template>
            </el-table>
        </div>
</template>

<script>
export default {
  props:{
    tableData:{
      type:Array,
      default: ()=>{}
    },
      pagetotal:{
      type:[Number,Object],
      default: 0,
    },
      pageNum:{
      type:[Number,Object],
      default: 0,
      },
     logdingB:{
      type:Boolean,
      default: false,
    },
    datano:{
      type:Boolean,
      default: true,
    }
  },
         data(){
             return{
                 headerStyle:{
                     'background':'#F3F3F3'
                 },
                 pageNumbtn:this.pageNum,
                 pagetotalbtn:this.pagetotal,
                 logding:this.logdingB,
             }
         },
   watch: {
    pagetotal(val){
     
      // this.watchName = val;
       this.pagetotalbtn =val
        console.log(val)
      },

      pageNum:{
        immediate:true,
        handler(val){
            
            this.pageNumbtn =val
            console.log(val)
        }
      // this.watchName = val;
      },
      logdingB(val) {
      console.log(val)
      this.logding = val;
      }
  },
         methods:{
           getData(){
             this.logding = true
             this.$emit('getdata')
           }
         }
}
</script>

<style scoped>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
/deep/.el-table .header-row {
  background-color:#F3F3F3 !important;
  height: 3rem;
  text-align: center;
}
.el-table .header-row .cell{
    /* margin-top: 2.5rem; */
    text-align: center;
    font-size: 1.6rem;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: var(--el-color-text-3);
}
.cell-row{
    height: 3rem;
}
/deep/.el-table .cell-row .cell{
      text-align: center;
    font-size: 1rem;
font-family: Source Han Sans CN-Regular, Source Han Sans CN;
font-weight: 400;
color: var(--el-color-text-3);
}
.table-append{
  width: 100%;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-content: center;
      flex-wrap: wrap;
}
</style>